<template>
  <div>
    <div class="shop">
      <section class="shop-info-containers" ref="topPart">
        <shop-header :title="'商家姓名'" ref="shopHeader"></shop-header>
        <section class="shop-info">
          <mu-paper class="demo-paper shop-info-img" :zDepth="2">
            <img src="../../../static/img/shop-img.jpeg" alt=""/>
          </mu-paper>
          <div class="shop-info-detail">
            <p class="shop-name">{{sellerInfo.name}}<img class="right-arrow" src="../../../static/img/hole_forward.png"/></p>
            <span class="announcement">公告：{{sellerInfo.infos[0]}}</span>
            <span class="description"><span>{{sellerInfo.description}}</span></span>
          </div>
        </section>
        <section class="shop-activity">
          <ul class="activity-container" ref="activityContainer">
            <li class="activity">
              <span>减</span>
              <p>{{sellerInfo.supports[0].description}}</p>
              <div @click="toggleActivity">3个活动<i ref="activityArrow"></i></div>
            </li>
            <li class="activity">
              <span>特</span>
              <p>{{sellerInfo.supports[1].description}}</p>
            </li>
            <li class="activity">
              <span>首</span>
              <p>{{sellerInfo.supports[2].description}}</p>
            </li>
            <li class="activity">
              <span>首</span>
              <p>{{sellerInfo.supports[3].description}}</p>
            </li>
          </ul>
        </section>
      </section>
      <section class="shop-slider-wrapper" ref="shopWrapper">
        <section class="slider-title">
          <ul>
            <li class="slider-title-item" :class="{'slider-title-actived':(scrollxIndex === 0)}" ref="firstSlider">商品</li>
            <li class="slider-title-item" :class="{'slider-title-actived':(scrollxIndex === 1)}" ref="secondSlider">评价{{sellerInfo.score}}分</li>
          </ul>
          <div class="line" ref="line"></div>
        </section>
        <scrollx class="scrollxbox"
                 @indexPage="titleChange"
                 :listenScroll="listenScroll"
                 :probeType="probeType"
                 @scroll="scroll">
          <section class="buycart-box">
            <section class="product-container">
              <section class="menu-container">
                <left-slider @scrollTo="handleCartScroll" :cartCurrentIndex="cartCurrentIndex" :food="sliderFood"></left-slider>
              </section>
              <section class="buy_cart_container">
                <buy-cart :index="leftMenuCurrencyIndex" @getCartIndex="getCartIndex" :food="dishesInfo"></buy-cart>
              </section>
            </section>
          </section>
          <section class="recommend">
            <recommend :data="shopRatings"></recommend>
          </section>
        </scrollx>
      </section>
    </div>
    <shopcart :selectFoods="selectedFood"></shopcart>
  </div>
</template>

<script>
    import ShopHeader from "./children/shop-header";
    import ShopFooter from "./children/shop-footer";
    import LeftSlider from "./children/left-slider";
    import BuyCart from "./children/buy-cart";
    import Recommend from "./children/recommend";
    import Scroll from "../../components/scroll/scroll";
    import Scrollx from "../../components/slider/scrollx";
    import {prefixStyle} from "../../common/js/dom";
    import {toggleClass} from "../../common/js/dom";
    import Shopcart from "./children/shopcart";
    import data from "../../../static/virtualData/food"

    const seller = data.seller
    const goods = data.goods
    const ratings = data.ratings
    const transform = prefixStyle('transform')

    export default {
      components: {
        Shopcart,
        Scrollx,
        Scroll,
        Recommend,
        BuyCart,
        LeftSlider,
        ShopFooter,
        ShopHeader
      },
      name: "shop",
      data () {
        return {
          leftMenuCurrencyIndex: 0,
          cartCurrentIndex: 0,
          scrollX: true,
          scrollxIndex: 0,
          dishesInfo: [],
          sellerInfo: {},
          shopRatings: [],
          scrollY: 0,
          slidexData: [],
          probeType: 3,
          listenScroll: true
        }
      },
      mounted () {
        this.topPartHeight = this.$refs.topPart.clientHeight
        this.headerHeight = this.$refs.shopHeader.clientHeight
        this.activityContainerHeight = this.$refs.activityContainer.children[1].offsetTop
        this.$refs.shopWrapper.style.top = `${this.topPartHeight}px`
        setTimeout(() => {
          this.slidexData = [0]
        }, 20)
      },
      created () {
        this.getDishesInfo()
        this.getSellerInfo()
      },
      methods: {
        handleCartScroll (index) {
          this.leftMenuCurrencyIndex = index
        },
        getCartIndex (index) {
          this.cartCurrentIndex = index
        },
        titleChange (index) {
          this.scrollxIndex = index
        },
        getDishesInfo () {
          this.dishesInfo = goods
          this.shopRatings = ratings
          this.$set(this.dishesInfo, 'count', 1);
        },
        getSellerInfo () {
          this.sellerInfo = seller
        },
        scroll (pos) {
          this.scrollY = pos.y
        },
        toggleActivity () {
          toggleClass(this.$refs.activityArrow, 'toggleActivety')
          if (this.$refs.activityArrow.className.indexOf('toggleActivety') > -1) {
            this.$refs.shopWrapper.style.top = `${this.activityContainerHeight}px`
          } else {
            this.$refs.shopWrapper.style.top = `${this.topPartHeight}px`
          }
        }
      },
      computed: {
        selectedFood () {
          let foods = []
          this.dishesInfo.forEach((food) => {
            food.foods.forEach((item) => {
              if (item.count) {
                foods.push(item)
              }
            })
          })
          return foods
        },
        sliderFood () {
          let foods = []
          this.dishesInfo.forEach((food) => {
            let num = 0
            food.foods.forEach((item) => {
              if (item.count) {
                num += item.count
              }
            })
            food['count'] = num
            foods.push(food)
          })
          return foods
        }
      },
      watch: {
        scrollxIndex (newval) {
          let firstSlider = this.$refs.firstSlider.clientWidth
          let secondSlider = this.$refs.secondSlider.clientWidth
          if (newval === 0) {
            this.$refs.line.style[transform] = `translate3d(0px,0,0)`
            this.$refs.line.style.width = `${firstSlider}px`
          } else {
            this.$refs.line.style[transform] = `translate3d(${firstSlider+20}px,0,0)`
            this.$refs.line.style.width = `${secondSlider}px`
          }
        },
        scrollY (newVal) {
          console.log(newVal)
        }
      }
    }
</script>

<style scoped>
  .scrollxbox{
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
  .shop{
    position: relative;
    height: 100vh;
    background-color: #F5F5F5;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
  }
  .slider-title{
    background-color: #ffffff;
    padding: 0 28px;/*rem*/
    height: 70px;/*rem*/
    line-height: 70px;/*rem*/
    position: relative;
    z-index: 100;
  }
  .slider-title .line{
    position: absolute;
    bottom: 0;
    /*display: inline-block;*/
    /*border-bottom: 4px solid #4993f8;*/
    height: 4px;/*rem*/
    width: 60px;/*rem*/
    background-color: #4993f8;
    transition: all 200ms ease-out;
  }
  .slider-title ul{
    display: flex;
  }
  .slider-title .slider-title-item{
    font-size: 28px;/*px*/
    color: #333333;
    margin-right: 45px;/*rem*/
  }
  .slider-title li.slider-title-actived{
    color: #4993f8;
  }

  .shop-info-containers{
    position: relative;
    z-index: 100;
    background: -o-linear-gradient(bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
    background: -moz-linear-gradient(bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
    background: linear-gradient(to bottom right, rgba(95, 139, 247,1), rgba(95, 194, 249, 1));
  }
  .shop-info{
    padding: 0 30px 12px 30px;/*rem*/
    display: flex;
    position: relative;
  }
  .right-arrow{
    height: 22px;/*rem*/
    width: 22px;/*rem*/
    margin-left: 12px;/*rem*/
  }
  .shop-info-img{
    position: absolute;
    height: 152px;/*rem*/
    width: 152px;/*rem*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .shop-info-img img{
    height: 100%;
    width: 100%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
  }
  .shop-info-detail{
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 0;
    color: #ffffff;
    margin-left: 170px;/*rem*/
  }
  .shop-info-detail .shop-name{
    font-size: 32px;/*rem*/
  }
  .shop-info-detail .announcement,.shop-info-detail .description{
    font-size: 18px;
    margin-top: 10px;/*rem*/
    color: rgba(255, 255, 255, 0.8);
  }
  .shop-info-detail .description span{
    padding: 4px 6px;/*rem*/
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 4px;
  }
  .shop-activity{
    background-color: #ffffff;
    padding: 42px 28px 30px 28px;/*rem*/
  }
  .activity{
    display: flex;
    align-items: center;
    margin-top: 8px;/*rem*/
  }
  .activity div{
    font-size: 18px;/*px*/
    color: #9a9a9a;
  }
  .activity div i{
    margin-left: 10px;
    display: inline-block;
    transition: all 0.3s ease;
    border-top: 10px solid transparent;/*rem*/
    border-right: 10px solid transparent;/*rem*/
    border-left: 10px solid transparent;/*rem*/
    border-bottom: 10px solid #9a9a9a;/*rem*/
  }

  .activity .toggleActivety{
    transform: rotate(180deg);
  }
  .activity span{
    /*height: 24px;!*rem*!*/
    /*width: 24px;!*rem*!*/
    /*line-height: 24px;!*rem*!*/
    color: #ffffff;
    background-color: #e17a77;
    font-size: 18px;/*px*/
    margin-right: 6px;/*rem*/
    padding: 0 4px;/*rem*/
    text-align: center;
  }
  .activity p{
    flex: 1;
    font-size: 18px;/*px*/
    color: #6a6a6a;
  }

  .shop-slider-wrapper{
    position: absolute;
    bottom: 0;
    /*flex: 1;*/
    width: 100%;
    background-color: #f5f5f5;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    z-index: 150;
    transform: translate3d(0,0,0);
  }

  .product-container{
    border-top: 4px solid #f9f9f9;
    background-color: #ffffff;
    display: flex;
    position: relative;
    overflow-y: hidden;
    height: 100%;
  }
  .product-container-box{
    display: flex;
    position: relative;
    overflow-y: hidden;
  }
  .product-container .menu-container{
    width: 145px;/*rem*/
    background-color: rgba(248, 248, 248, 1);
  }
  .product-container .menu-container div:first-child{
    height: 100%;
    overflow-y: hidden;
  }
  .product-container .buy_cart_container{
    flex: 1;
  }
  .product-container .buy_cart_container div{
    height: 100%;
    overflow-y: hidden;
    position: relative;
  }
  .shop-slider-wrapper .main-scroll{
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .main-box{
    flex: 1;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .sliderx .buycart-box{
    float: left;
    height: 100%;
  }
  .sliderx .recommend{
    height: 100%;
    float: left;
  }
  /*leftSlider的css*/
  .menu-box{
    padding-bottom: 90px;/*rem*/
  }
  .menu-box .menu-item{
    font-size: 24px;/*px*/
    color: #6d6d6d;
    height: 100px;/*rem*/
    line-height: 100px;/*rem*/
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }
  .menu-box .active{
    color: #333333;
    background-color: #ffffff;
  }
</style>
